<template>
    <div>
        <van-nav-bar
      title="出租管理"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="lie" v-for="(item,index) in list" :key="index"  @click="fu(item.houseCode)">
        <div><img :src="`http://liufusong.top:8080${item.houseImg}`" alt=""></div>
        <div class="you">
                  <div class="h3"><h3>{{item.title}}</h3></div>
                  <div class="xiang">{{item.desc}}</div>
                  <p>{{item.tags[0]}}</p>
                  <div class="qina">{{item.price}} <span>元/月</span></div>
        </div>
    </div>
    </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'VueMy',
  // 初始化
  created () {
    this.my()
  },
  data () {
    return {
      list: []
    }
  },

  mounted () {

  },

  methods: {
    onClickLeft () {
      this.$router.push('/home/user').catch(() => {

      })
    },
    async my () {
      const red = await request({
        url: '/user/houses'
      })
      // console.log(red.body)
      setTimeout(() => {
        this.list = red.body
      }, 500)
    },
    // 跳转详情页面
    fu (val) {
      this.$router.push(`/details?val=${val}`)
    }
  }
}
</script>

<style lang="less" scoped>
*{
   margin: 0;
   padding: 0;
}
.lie{
    height: 120px;
    width: 100%;
    border-bottom: solid 1px #999;
    padding: 10px 0;
    display: flex;
    img{
       width: 140px;
       height: 100px;
       background-color: #ffaeae;
    }
    .you{
       margin-left: 10px;
       .h3{
         height:  25px
       }
       .xiang{
         margin-bottom:  5px ;
       }
       p{
         height: 25px;
         width: 55px;
         background-color: #e1f5f8;
         border-radius: 5px;
         font-size: 14px;
         padding: 5px;
       }
       .qina{
          margin-top: 5px;
          color: red;
          font-size: 18px;
          span{
            font-size: 14px;
          }
      }
    }
}
</style>
